.HTML_Tag:before {
    content:    "<";
}
.HTML_Tag:after {
    content:    " />";
}


body > .Head {
    position:    fixed;
    width:       100%;
    left:        0;
    top:         0;
    z-index:     1;
}
body > .Head a,  body > .Head a:hover  {
    color:    white  !important;
}


body > .Head .NavBar > li {
    border-top:       3px  solid   transparent;
    border-bottom:    3px  solid   transparent;
    line-height:      2.5em;
}
body > .Head .NavBar > li:hover {
    border-top-color:    rgb(245, 80, 80);
}
@media (max-width:  640px) {
    body > .Head .Grid-Column {
        line-height:    3em;
        white-space:    nowrap;
    }
    body > .Head .DropDown.Head {
        border:    none;
    }
    body > .Head .NavBar > li {
        line-height:    normal;
    }
    body > .Head .NavBar > li > a,
    body > .Head .NavBar > li > a:hover {
        color:    black  !important;
    }
}


body > .Body {
    padding-top:    3.5em;
}
body > .Body > .Head {
    padding:    3em  1em;
}
body > .Body .Icon:hover {
    background:    transparent;
}


.Body > .Item-Box {
    width:       24em;
    height:      14em;
    overflow:    hidden;
}
@media (max-width:  640px) {
    .Body > .Item-Box {
        width:     95%;
        height:    auto;
    }
}
.Body > .Item-Box > h3 {
    padding-right:    1em;
}
.Body > .Item-Box > ul {
    list-style:    none;
    padding:       0
}
.Body > .Item-Box > ul > li {
    line-height:    2em;
    max-height:     2em;
}
.Body > .Item-Box > ul > li:hover {
    max-height:     none;
    white-space:    normal;
}


body > .Body > h3 {
    margin:    2em;
}
body > .Body > h3:before,  body > .Body > h3:after  {
    color:      darkgray;
    padding:    0  5px;
}


body > .Body > .Grid-Row .Head > a {
    display:    inline-block;
    margin:     0  1em;
}
body > .Body > .Grid-Row > .Tab {
    height:    43em;
}
#Feature > .Grid-Row iframe {
    margin:                 1em;
    border:                 1em  solid;
    border-top-width:       2em;
    border-bottom-width:    3em;
    border-radius:          1em;
    width:                  20em;
    height:                 36.5em;
}
@media (max-width:  640px) {
    #QRcode {
        border:    none;
    }
    #QRcode:before {
        content:    none;
    }
    #QRcode > .DropDown.Body {
        left:    -2em;
    }
    body > .Body > .Grid-Row {
        display:    block  !important;
    }
    body > .Body > .Grid-Row > * {
        display:    inline-block;
        width:      100%;
    }
    body > .Body > .Grid-Row > .Tab > pre {
        height:    75%;
    }
}

#Compare + div {
    overflow-x:    auto;
}
body > .Body table td:first-child {
    font-weight:    bold;
}
body > .Body table td > * {
    white-space:    nowrap;
}
body > .Body table td ul {
    text-align:    left;
}


.osc_git_box {
    margin:    0  6em  !important;
}
@media (max-width:  640px) {
    .osc_git_box {
        margin-left:     0  !important;
        margin-right:    0  !important;
    }
}

a.Item-Box > img.Logo {
    display:    block;
    width:      8em;
    height:     8em;
}
a.Item-Box {
    position:    relative;
}
a.Item-Box:after {
    content:          "V";
    font-weight:      bold;
    color:            orange;
    background:       white;
    width:            1.5em;
    line-height:      1.5em;
    border-radius:    50%;
    position:         absolute;
    bottom:           1.5em;
    right:            1em;
}


body > .Foot > .Grid-Column {
    padding-bottom:    2em;
}